<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <table class="table table-bordered">
                    <caption class="text-center text-danger h2">
                        板牙拖车
                    </caption>
                    <tr>
                        <td>
                            全选
                            <input type="checkbox" v-model="checkAll" @change='changeAll'/>
                        </td>
                        <td>商品</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>

                    <tr v-for="(item,index) in products">
                        <td>
                            <input type="checkbox"
                            v-model="item.isSelected"
                            @change="checkOne"
                            >
                        </td>
                        <td>
                            <img :src="item.productCover" alt="">
                        </td>
                        <td>{{item.productPrice}}</td>
                        <td>
                            <input type="number" max="10" min="0" v-model="item.productCount">
                        </td>
                        <td>
                            {{item.productPrice*item.productCount | toFixed}}
                        </td>
                        <td>
                            <button class="btn btn-danger" @click="remove(item.id)">删除</button>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="6">总计￥{{sum() | toFixed}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
        let ss = [
            {
                isSelected:true,
                price:10,
                num:2
            },
            {
                isSelected:false,
                price:8,
                num:5
            },
            {
                isSelected:true,
                price:20,
                num:2
            }
        ];
        let res = ss.reduce((prev,next)=>{
            // 第一次循环 prev 0                       next 数组的第一项
            // 第二次循环 prev是第一次return的结果20     next 数组的第二项
            // 第三次循环 prev是第二次return的结果20     next 是数组的第三项

            let flag = next.isSelected ? 1:0;
            // if(next.isSelected){
            //     return prev + (next.num * next.price)
            // }
            // else {
            //     return prev;
            // }
            // return prev + (next.num * next.price)*flag;
            return prev + (next.num * next.price)*next.isSelected;
            
        },0)
        let vm = new Vue({
            el: '#app',
            data: {
                products: [],
                checkAll:false
            },
            created() {
                // 生命周期函数，他就是以个钩子回调函数，当vue实例创建完成，他就会自动执行，一般在里边进行数据的异步请求
                this.getData(); // 在这里发送数据请求
            },
            methods: {
                getData() {
                    // this是当前vue实例
                    axios.get('./carts.json').then(res => {
                        console.log(res);
                        // 把请求成功以后的数据赋值给data中的products
                        this.products = res.data;
                    })
                },
                remove(id) {
                    this.products = this.products.filter(item => {
                        return item.id != id;
                    });
                },
                sum(){
                    return this.products.reduce((prev,next)=>{
                        if(next.isSelected){
                            return prev + next.productCount * next.productPrice
                        }
                        else {
                            return prev;
                        }
                         
                    },0);
                },
                changeAll(){
                    console.log(this.checkAll);
                    // if(this.checkAll){
                        this.products.forEach(item=>{
                           item.isSelected = this.checkAll
                        })
                    // }
                },
                checkOne(){
                    // 每一次执行的时候你要判断一下，当前products中所有的isSelected是否全部为true，如果全部为true，那就把checkAll，否则把checkAll改为false
                    this.checkAll = this.products.every(item=>{
                        return item.isSelected;
                    })
                }
            },
            filters: {
                toFixed(value, num = 2) {
                    return value.toFixed(num)
                }
            }
        })
    </script>
</body>

</html>